<template>
  <el-container>
    <el-header>
      <!--头部-->
        <Header></Header>
    </el-header>
    <br>
  <el-main>
    <!--搜索-->
      <Search></Search>
      <!--轮播图开始-->
      <el-row>
        <el-col :span="24">
          <el-carousel indicator-position="outside" style="height:401px" >
            <el-carousel-item v-for="x in imgList"  :key="x" style="height:401px" >
              <a  @click="toProduct(x.proType)">
                <img :src="require('../../assets/images/'+x.imgUrl)" width="1450" height="401"  >
              </a>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
      <!--轮播图结束-->
    <br>
    <!--女装-->
    <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i>女装精品</span>
          <template v-for="x in list" >

            <el-col :span="12" v-if="x.imgType==2">
              <el-result :title="x.imgDesc">
                <template slot="icon" >
                  <a  @click="toProduct(2)">
                  <img :src="require('../../assets/images/index/'+x.imgUrl)" width="678px">
                  </a>
                </template>
              </el-result>
            </el-col>

          </template>
        </el-tab-pane>
      </el-tabs>
    <br>
    <!--男装-->
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i>男装精品</span>
        <template v-for="x in list ">

          <el-col :span="12"v-if="x.imgType==1">
            <el-result :title="x.imgDesc">
              <template slot="icon">
                <a @click="toProduct(1)">
                <img :src="require('../../assets/images/index/'+x.imgUrl)" width="678px">
                </a>
              </template>
            </el-result>
          </el-col>

        </template>
      </el-tab-pane>
    </el-tabs>
    <br>
    <!--鞋包-->
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i>鞋包精品</span>

          <template v-for="x in list">
          <el-col :span="12" v-if="x.imgType==3">
            <el-result :title="x.imgDesc">
              <template slot="icon">
                <a @click="toProduct(3)">
                <img :src="require('../../assets/images/index/'+x.imgUrl)"  width="678px">
                </a>
              </template>
            </el-result>
          </el-col>
          </template>

      </el-tab-pane>
    </el-tabs>

    </el-main>
      <Footer></Footer>
  </el-container>
</template>

<script>
  import Footer from "./myComponents/Footer";  import Header from "./myComponents/Header";
  import Search from "./myComponents/Search";

    export default {
        name: "Index",
        data(){
          return{
          //轮播
            imgList:[],//轮播
            list:[]
        }
      },
      components:{
        Header,
        Search,
        Footer
      },
      methods:{
        toProduct(proType){
          localStorage.setItem("proType",proType);
          window.location.href="/productClass";
        },
        queryData(){//查询首页数据
          const self = this;
          //发送ajax请求
          const http = this.$http.get("/product-index/query");
          //成功回调
          http.then(function (rs) {
            console.log(rs.data);
            if(rs.data.code==200){
              //遍历赋值
              self.list = rs.data.data;
              for(let i=0;i<self.list .length;i++){
                 //轮播图
                  if(self.list [i].imgType==0){
                     self.imgList.push(self.list [i]);
                  }

              }

            }else{
              //提示
              self.$message(rs.data.msg);
            }
          });
          http.catch(function () {
            self.$alert("服务器异常，请检查是否启动服务器");
          })
        }
      },
      mounted() {
          this.queryData();
      }
    }
</script>

<style scoped>

</style>
